<template>
	<div class="container">
		<!-- <div style="height: 30px;"></div> -->
		<!-- 上传图片 -->
		<!-- <div style="display: flex;justify-content: center;">
			<div>
				<u-upload :fileList="fileList1" @afterRead="afterRead" @delete="deletePic" name="1" multiple
					:maxCount="1"></u-upload>
			</div>
		</div> -->
		<!-- 昵称 -->
		<div style="height: 20px;"></div>
		<div style="display: flex;justify-content: center;align-items: center;">
			<input @change="changeName" v-model="nickname" style="width: 35%;text-align: center;" type="text">
			<u-icon size="28px" color="#000000" name="edit-pen"></u-icon>
		</div>
	</div>
</template>
<script>
import { changeNickname } from '../api/api';
import request from '../../common/request';
export default {
	data() {
		return {
			nickname: '',
			fileList1: [],
			request: request,
			avatar: '',
			userInfo:{}
		}
	},
	methods: {
		changeName() {
			console.log(this.nickname);
			changeNickname({
				nickName: this.nickname
			}).then(res => {
				console.log(res, 'res');
				if (res.data.code == 200) {
					uni.showToast({
						title: res.data.msg,
						icon: 'none'
					})
				}
				let newUserInfo = {
					...this.userInfo, 
					nickName:this.nickname
				};
				uni.setStorageSync('userInfo', newUserInfo);
			})
		},
		deletePic(event) {
			this[`fileList${event.name}`].splice(event.index, 1)
		},
		async afterRead(event) {
			// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
			let lists = [].concat(event.file)
			let fileListLen = this[`fileList${event.name}`].length
			lists.map((item) => {
				this[`fileList${event.name}`].push({
					...item,
					status: 'uploading',
					message: '上传中'
				})
			})
			for (let i = 0; i < lists.length; i++) {
				const result = await this.uploadFilePromise(lists[i].url)
				let item = this[`fileList${event.name}`][fileListLen]
				this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
					status: 'success',
					message: '',
					url: result
				}))
				fileListLen++
			}
		},
		uploadFilePromise(url) {
			return new Promise((resolve, reject) => {
				let a = uni.uploadFile({
					url: `${this.base}/system/user/profile/avatar`,
					filePath: url,
					name: 'avatarfile',
					// formData: {
					//     'type': 'faultPhoto'
					// },
					header: {
						Authorization: uni.getStorageSync('token')
					},
					success: (res) => {
						const data = JSON.parse(res.data)
						console.log(data,'DATAS');
						// this.img1 = data.data;
						let newUserInfo = {
					...this.userInfo, 
					avatar:data.imgUrl
				};
				console.log(newUserInfo,'newUserInfo');
				uni.setStorageSync('userInfo', newUserInfo);
						resolve(res.data.data)
					}
				});
			})
		},

	},
	onLoad() {
		this.userInfo = uni.getStorageSync('userInfo')
		this.nickname = uni.getStorageSync('userInfo').nickName;
		this.base = this.request.config.baseURL;
		this.avatar = uni.getStorageSync('userInfo').avatar;
		console.log(this.base + this.avatar);
		this.fileList1.push({
			url: this.base + this.avatar
		})
	}

}
</script>
<style lang="scss">
.container {
	height: 100vh;
	width: 100vw;
	background: #ffffff;
	color: #000000;
	font-size: 18px;
}

.head-img image {
	width: 100rpx;
	height: 100rpx;
	border-radius: 50%;
}
</style>